<template>
	<view class="user-manage">
		<view class="search-top">
			<view class="input-search">
				<input type="text" placeholder="搜索关键字" v-model="keywords" />
				<image src="../../static/images/home/切片@2x.png" @click="getUserList"></image>
			</view>
			<view class="add-btn" @click="gotouserAdd()">
				<image src="../../static/images/user/编组 3备份 3@2x.png" mode=""></image>
				<text>创建账户</text>
			</view>
		</view>
		<view class="list-box">
			<view class="tab-top">
				<view class="tab-item" :class="activeIndex == index ? 'active' : ''" v-for="(item, index) in tabData"
					:key="index" @click="tabClick(index)">
					{{ item }}
				</view>
			</view>
			<view class="device-list-box" v-if="datalist.length > 0">
				<view class="device-list-item" v-for="(item, i) in datalist" :key="i">
					<view class="item-top">
						<view class="item-top-left">{{ item.nickname }}</view>
						<view class="item-top-right">分成：{{ item.divide_rate }}%</view>
					</view>
					<view class="deviceContent">
						<image :src="item.avatar"></image>
						<view class="item-info">
							<view class="t0">{{activeIndex=="0"?'代理':'商家'}}编号：{{ item.user_no }}</view>
							<view class="t1">手机号码：{{ item.mobile }}</view>
							<view class="t2">注册时间：{{ item.createtime }}</view>
						</view>
					</view>
					<view class="btns">
						<button class="btn-blue" @click="gotouserEdit(item)">用户修改</button>
						<!-- <button class="btn-blue" @click="gotouserEdit(item)">删除</button> -->
						<!-- <button class="btn-green" v-if="activeIndex === 0" @click="showPopup">更多</button> -->
					</view>
				</view>
			</view>
			<view class="empty-box" v-else>
				<image src="../../static/images/nodata.png"></image>
				<text>暂无记录～</text>
			</view>
		</view>

		<!-- 弹出层 -->
		<uni-popup ref="popup" @maskClick="maskClick">
			<view class="popup-content">
				<!-- 选择项 -->
				<view class="choice-item" v-for="(item, index) in choices" :key="index" @click="makeChoice(item)">
					{{ item }}
				</view>
				<button @click="maskClick">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				activeIndex: 0,
				tabData: ['代理商', '商家'],
				choices: ['代扣贷款'], // 弹出选择项
				keywords: '',
				datalist: []
			};
		},
		onLoad(options) {
			if (options && options.type) {
				this.activeIndex = Number(options.type) - 1;
				this.getUserList();
			}
		},
		onShow() {
			this.getUserList();
		},
		methods: {
			tabClick(type) {
				this.activeIndex = type;
				this.getUserList();
			},
			showPopup() {
				this.$refs.popup.open('bottom');
			},
			maskClick() {
				this.$refs.popup.close('bottom');
			},
			makeChoice(choice) {
				uni.navigateTo({
					url: 'withholdingLoan' // 代扣贷款
				});
			},
			getUserList() {
				api.getUserList({
					keywords: this.keywords,
					type: this.activeIndex + 1
				}).then(res => {
					this.datalist = res.data;
				});
			},
			gotouserAdd() {
				uni.navigateTo({
					url: 'userAdd?type=' + (this.activeIndex + 1) // 用户添加
				});
			},
			gotouserEdit(user) {
				store.commit('saveTempUser', user);
				uni.navigateTo({
					url: 'userEdit?isEdit=1' // 用户修改
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.user-manage {
		background: url('/static/images/home/home-bg.png') no-repeat;
		background-size: 100% 348rpx;
		padding-bottom: 100rpx;
		padding: 14px;

		.search-top {
			display: flex;

			.input-search {
				position: relative;
				flex: 1;

				uni-input {
					background: #ffffff;
					box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
					border-radius: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #7d8592;
					padding: 24rpx 40rpx;
					font-style: normal;
				}

				uni-image {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: 24rpx;
					top: 20rpx;
				}
			}

			.add-btn {
				width: 198rpx;
				height: 88rpx;
				background: #ffffff;
				box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
				border-radius: 12px;
				margin-left: 10px;
				display: flex;
				align-items: center;
				justify-content: center;

				uni-image {
					width: 17px;
					height: 17px;
				}

				uni-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #49a1fd;
					line-height: 44rpx;
					text-align: right;
					font-style: normal;
				}
			}
		}

		.list-box {
			.tab-top {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 32rpx 0;

				.tab-item {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #ffffff;
					line-height: 42rpx;
					font-style: normal;

					&.active {
						font-size: 34rpx;
						color: #ffffff;
						line-height: 48rpx;
						position: relative;

						&::after {
							position: absolute;
							content: '';
							bottom: -5px;
							left: calc(50% - 30rpx);
							width: 60rpx;
							height: 8rpx;
							background: #ffffff;
							border-radius: 3px;
						}
					}
				}
			}

			.device-list-box {
				.device-list-item {
					background: url('../../static/images/home/编组 3备份 2@2x.png') no-repeat;
					background-size: 100% 100%;
					padding: 20px 14px;
					border-radius: 14px;
					position: relative;
					margin: 0 -10px 10px;

					.item-top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.item-top-left {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 28rpx;
							color: #000000;
							line-height: 40rpx;
						}

						.item-top-right {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #f95452;
							line-height: 40rpx;
						}
					}

					.deviceContent {
						display: flex;
						align-items: center;
						margin-top: 30rpx;

						uni-image {
							width: 120rpx;
							height: 120rpx;
							margin-right: 16rpx;
						}

						.item-info {
							.t0 {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #413100;
								line-height: 40rpx;
								font-style: normal;
							}

							.t1 {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
								line-height: 34rpx;
								font-style: normal;
							}

							.t2 {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
								line-height: 34rpx;
								font-style: normal;
							}
						}
					}

					.deviceBottom {
						border-bottom: 1px solid rgba(73, 161, 253, 0.2);
						padding-bottom: 16rpx;
						padding-top: 14rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.bottom-left {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
						}

						.bottom-right {
							display: flex;
							align-items: center;
							justify-content: center;
							background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
							box-shadow: 0px 2px 6px 0px rgba(20, 135, 255, 0.4);
							border-radius: 22px;
							padding: 4rpx 16rpx;

							uni-image {
								width: 24rpx;
								height: 24rpx;
								margin-left: 6rpx;
							}

							uni-text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 26rpx;
								color: #ffffff;
								line-height: 36rpx;
								font-style: normal;
							}
						}
					}

					.btns {
						display: flex;
						justify-content: end;
						margin-top: 20rpx;

						uni-button {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #ffffff;
							line-height: 40rpx;
							font-style: normal;
							padding: 8rpx;
							border-radius: 4px;
							margin: 0 0 0 20rpx;

							&.btn-blue {
								background: #49a1fd;
							}

							&.btn-green {
								background: #25ab64;
							}

							&.btn-yellow {
								background: #ff950a;
							}

							&.btn-red {
								background: #f95452;
							}
						}
					}
				}
			}

			.empty-box {
				margin: 0 -10px;
				text-align: center;
				background: url('../../static/images/home/empty-bg.png') no-repeat;
				padding: 200rpx 0 160rpx;
				background-size: 100% 100%;

				uni-image {
					width: 400rpx;
					height: 340rpx;
				}

				uni-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #a7a5a5;
					line-height: 20px;
					font-style: normal;
					margin-top: 50rpx;
					display: block;
				}
			}
		}
	}
</style>